<template>
	<div>
		<header>
			<nav>

				<a href="#/"> <i class="fa fa-chevron-left"></i></a>
				<form @submit="search">
					<div>
						<a><i class="fa fa-search"></i>

							<input autofocus autocomplete="off" type="search" name="name" v-model.trim="ask" />

							<img src="/static/img/1.png" />
						</a>
					</div>
					<button type="submit">搜索</button>
				</form>
			</nav>
		</header>
		<main>

			<p class="success" style="display: none; padding: 5px 10px; color: orangered;text-align: center;position: absolute;width: 100%;">{{content}}</p>
			
			<ul>
				<p>历史搜索</p>
				<li v-for="(item,ins) in hisSearch" :key='ins'>
					<a :href="'#/buller/result?name='+item">{{item}}</a>
				</li>
			</ul>
		
		</main>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	export default {
		data: function() {
			return {
				ask: '',
				content: '',
				hisSearch:[]
			}
		},
	
		methods: {
			search(ev) {
				ev.preventDefault();

				if(this.ask == '') {
					this.content = '请输入查询条件';
					$('.success').fadeIn();

					setTimeout(function() {
						$('.success').fadeOut();
					}, 800)

					return;
				}

				location.href = '#/buller/result?name=' + this.ask;
			}
		},
		mounted(){
			axios.get('/buller/checkSearch').then((result)=>{
		
				this.hisSearch = result.data.hisSearch;
			}).catch((err)=>{
				console.log(err);
			})
		}

	}
</script>

<style scoped>
	header nav a {
		font-size: 13px;
		color: #eee;
	}
	
	nav {
		width: 100%;
		overflow: hidden;
		line-height: 30px;
		padding: 8px 10px;
		background: linear-gradient(to right, #FF9202 0%, #FF5502 100%);
	}
	
	nav>a {
		float: left;
		position: relative;
		top: 2px;
	}
	
	.fa-chevron-left {
		font-size: 18px;
		line-height: 30px;
	}
	
	nav>form div {
		float: left;
		margin-left: 5%;
		width: 62%;
		position: relative;
		left: 10px;
		background: white;
		line-height: 30px;
	}
	
	nav>form>div>a {
		display: block;
		width: 100%;
		font-size: 15px;
	}
	
	nav>form>div>a {
		display: inline-block;
	}
	
	nav>form>div>a input {
		line-height: 30px;
		border: none;
	}
	
	nav>a>img {
		width: 30px;
		height: 30px;
		position: relative;
		top: 2px;
		border-radius: 50%;
	}
	
	nav>form>div i {
		color: darkgray;
		font-size: 16px;
		margin-left: 5px;
		margin-right: 5px;
	}
	
	nav>form>div img {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}
	
	nav button {
		border: none;
		cursor: pointer;
		float: right;
		margin-right: 4%;
		width: 13%;
		background: orange;
		border-radius: 3%;
		position: relative;
		top: 5px;
		line-height: 23px;
		color: white;
	}
	ul{
		overflow: hidden;
		padding: 10px;
		
	}
	ul p{
		font-weight: 600;
		font-size: 18px;
	}
		li{
			float: left;
			margin-right: 10%;
			margin-top: 15px;
		}
	li a{
		padding: 2px 13px;
		border-radius: 10%;
		
		background: #ddd;
		font-size:14px ;
	}
</style>